<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" charset="UTF-8">
		<title>商品详情-百台云 - 直播你的梦想（https://www.100ytv.com）</title>
		<meta name="keywords" content="百台云">
		<meta name="description" content="百台云">
		<meta name="Copyright" content="百台云 All Rights Reserved">
		<meta name="Robots" content="All">
		<meta name="application-name" content="百台云 www.luoanziben.com">
		<meta name="msapplication-tooltip" content="百台云 www.luoanziben.com">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<!--title小图标显示-->
		<link rel="icon" href="images/ico-logo.png" type="image/x-icon">
		<link rel="shortcut icon" href="images/ico-logo.png">
		<link rel="Bookmark" href="images/ico-logo.png">
		<!--样式文件-->
		<link rel="stylesheet" type="text/css" href="css/aui.css" />
		<link rel="stylesheet" type="text/css" href="css/bty.css" />
	</head>

	<body>
		<!--start:header头部-->
		<header id="bty_header" class="aui-bar aui-bar-nav text-center">
			<a onclick="javascript:history.back(-1);" class="aui-pull-left aui-btn"> <span class="aui-iconfont aui-icon-left"></span> </a>
			<div class="aui-col-xs-9">
				<div class="aui-tab bty-tab" id="tab">
				    <a href="#thisShop" class="aui-tab-item aui-active text-white">商 品</a>
				    <a href="#shopDetail" class="aui-tab-item text-white">详 情</a>
				    <a href="#review" class="aui-tab-item text-white">评 价</a>
				</div>
			</div>
			<a href="shopCart.html" class="aui-margin-r-10 float-right"> <span class="aui-iconfont aui-icon-cart"></span> </a>
		</header>
		<!--end:header头部--->

		<!--start:内容区域-->
		<div class="bty-shops relative" id="bty-shops">
			<!--下拉时显示的文字-->
			<div class='msg-buffer xs-font text-gray absolute'><i class='aui-iconfont aui-icon-recovery'></i>没有更多内容了</div>
			
			<!--轮播组件-->
			<div id="thisShop" class="aui-content ">
				<div id="aui-slide">
					<div class="aui-slide-wrap">
						<div class="aui-slide-node bg-dark">
							<img options="bgcolor=#ccc&color=#ffffff&fsize=10&text=轮播图03" class="placeholder"/>  
						</div>
						<div class="aui-slide-node bg-dark">
							<img options="bgcolor=#ccc&color=#ffffff&fsize=10&text=轮播图02" class="placeholder"/>  
						</div>
						<div class="aui-slide-node bg-dark">
							<img options="bgcolor=#ccc&color=#ffffff&fsize=10&text=轮播图01" class="placeholder"/>  
						</div>
					</div>
					<div class="aui-slide-page-wrap"></div>
				</div>
			</div>
	
			<!--start:商品列表-->
			<!--商品介绍-->
			<div class="aui-content bg-white">
				<div id="shopName" class="text-overflow aui-col-xs-10">商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</div>
				<div id="share" class="aui-col-xs-2 shop-shareBox text-center" onclick="shareout('#wechatPark','#wechat')"> 
					<i class="aui-iconfont aui-icon-share"></i><p>分享</p>
				</div>
				<p class="shops-tipsMsg text-overflow text-gray xs-font">商品简述商品简述商品简述商品简述商品简述商品简述商品简述商品简述</p>
				<div class="aui-col-xs-12 padding-ten aui-text-left clearfix">
					<span class="aui-col-xs-6 price-now clearfix">现价：￥<span>1000,00</span></span>
					<s class="aui-col-xs-6 price-before clearfix">原价：￥<span>9999,99</span></s>
					<p class="aui-col-xs-6 price-before clearfix">库存：<span>99999,99</span></p>
					<p class="aui-col-xs-6 price-before clearfix"><span>9999,99</span>人购买</p>
				</div>
			</div>
			
			<!--特点-->	
			<div class="aui-content bg-white aui-margin-t-10 aui-margin-b-10 padding-ten clearfix">
				<p class="aui-col-xs-3 xs-font text-red"><i class="aui-iconfont aui-icon-star"></i> 正品保证</p>
				<p class="aui-col-xs-3 xs-font text-red"><i class="aui-iconfont aui-icon-star"></i> 快捷支付</p>
				<p class="aui-col-xs-3 xs-font text-red"><i class="aui-iconfont aui-icon-star"></i> 快递免邮</p>
				<p class="aui-col-xs-3 xs-font text-red"><i class="aui-iconfont aui-icon-star"></i> 七天退换货</p>
			</div>	
			
			<!--规格分类-->
			<!--<div class="aui-content aui-margin-t-10 aui-margin-b-10 bg-white padding-ten clearfix">
				<a href="">
					<p class="aui-col-xs-11">选择规格</p>
					<i class="aui-col-xs-1 aui-iconfont aui-icon-right"></i>
				</a>
			</div>-->
			
			<div class="aui-content aui-margin-t-10 aui-margin-b-10 bg-white padding-ten clearfix">
				<a href="" class="vertical-justify-2">
					<p class="aui-col-xs-3 aui-font-size-12 vertical-middle-2">
						<span>选择规格</span>
					</p>
					<i class="aui-iconfont aui-icon-right float-right"></i>
				</a>
			</div>
				
			<!--商家信息-->
			<div class="aui-content bg-white aui-margin-t-10 aui-margin-b-10 padding-ten clearfix shop-info">
				<div class="clearfix shop-infoTop clearfix">
					<div class="aui-col-xs-3">
						<!--<div class="shopTrademark"> <img src="../aui-20170109-v2.1/icon/icon.png"/> </div>-->
						<a href="shop-homepage.html">
							<img options="bgcolor=#ccc&color=#ffffff&fsize=10&text=轮播图01" class="placeholder shopTrademark"/>
						</a>  
					</div>
					<div class="aui-col-xs-6">
						<h3 id="rademark">商家名称</h3>
						<h4 id="signature">商家签名</h4>
						<h5 id="monthlySales">月销量：<span>000,00</span></h5>
					</div>
					<div class="aui-col-xs-3">
						<div class="aui-btn bg-orange btn-radius btn-fellow aui-btn-warning aui-btn-outlined">已关注</div>
					</div>
				</div>
				<div class="shop-infoBottom shop-grade clearfix text-center">
					<div class="aui-col-xs-4">
						<p class="text-red">5.0</p>
						<h5>商品描述</h5>
					</div>
					<div class="aui-col-xs-4 gradeBorder">
						<p class="text-red">5.0</p>
						<h5>卖家服务</h5>
					</div>
					<div class="aui-col-xs-4">
						<p class="text-red">5.0</p>
						<h5>物流服务</h5>
					</div>
				</div>
				<div id="shopDetail" class="shop-infoBtn">
					<div class="aui-col-xs-6">
						<a href="" class="aui-btn aui-btn-danger aui-btn-block aui-btn-outlined aui-btn-sm btn-radius">进入店铺</a>
					</div>
					<div class="aui-col-xs-6">
						<div class="aui-btn aui-btn-block aui-btn-sm btn-radius">去看直播</div>
					</div>
				</div>
			</div>
			
			<!--商品详情-->	
			<h4 class="text-center aui-padded-5">- 商品详情 -</h4>
			<div class="aui-content bg-white aui-margin-t-10 aui-margin-b-10 padding-ten">
				<img src="images/error-img.png"/>
				<img src="images/error-img.png"/>
				<img src="images/error-img.png"/>
			</div>
	
			<!--评论-->	
			<h4 class="text-center aui-padded-10" id="review">- 评 论 -</h4>
			<div class="aui-content aui-margin-b-15">
		        <ul class="aui-list aui-media-list">
		            <li class="aui-list-item aui-padded-l-5">
		                <div class="aui-list-item-inner">
		                	<div class="aui-list-item-title aui-margin-b-5">
                		        <img options="size=30x30&bgcolor=#ccc&color=#ffffff&fsize=10&text=25x25" class="placeholder aui-inline btn-radius"/>
		                		<span class="">多张图片列表一 </span>
		                	</div>
		                    	
		                	<div class="aui-padded-l-15">
		                		<p class="aui-margin-b-5">评论文字评论文字评论文字评论文字评论文字评论文字评论文字评论文字评论文字评论文字评论文字评论文字评论文字评论文字评论文字</p>
		                		<div class="aui-row aui-row-padded aui-margin-b-5">
		                		    <div class="aui-col-xs-4">
		                		        <img options="bgcolor=#ccc&color=#ffffff&fsize=10&text=45x45" class="placeholder"/>
		                		    </div>
		                		    <div class="aui-col-xs-4">
		                		        <img options="bgcolor=#ccc&color=#ffffff&fsize=10&text=45x45" class="placeholder"/>
		                		    </div>
		                		    <div class="aui-col-xs-4">
		                		        <img options="bgcolor=#ccc&color=#ffffff&fsize=10&text=45x45" class="placeholder"/>  
		                		    </div>
		                		</div>
		                		<p class="aui-margin-b-5">2018-12-12 12:12:12</p>
		                	</div>
		                </div>
		            </li>
		            
		            
		            <li class="aui-list-item aui-padded-l-5">
		                <div class="aui-list-item-inner">
		                	<div class="aui-list-item-title aui-margin-b-5">
                		        <img options="size=30x30&bgcolor=#ccc&color=#ffffff&fsize=10&text=25x25" class="placeholder aui-inline btn-radius"/>
		                		<span class="">多张图片列表一 </span>
		                	</div>
		                    	
		                	<div class="aui-padded-l-15">
		                		<p class="aui-margin-b-5">评论文字评论文字评论文字评论文字评论文字评论文字评论文字评论文字评论文字评论文字评论文字评论文字评论文字评论文字评论文字</p>
		                		<div class="aui-row aui-row-padded aui-margin-b-5">
		                		    <div class="aui-col-xs-4">
		                		        <img options="bgcolor=#ccc&color=#ffffff&fsize=10&text=45x45" class="placeholder"/>
		                		    </div>
		                		    <div class="aui-col-xs-4">
		                		        <img options="bgcolor=#ccc&color=#ffffff&fsize=10&text=45x45" class="placeholder"/>
		                		    </div>
		                		    <div class="aui-col-xs-4">
		                		        <img options="bgcolor=#ccc&color=#ffffff&fsize=10&text=45x45" class="placeholder"/>  
		                		    </div>
		                		</div>
		                		<p class="aui-margin-b-5">2018-12-12 12:12:12</p>
		                	</div>
		                </div>
		            </li>
		            
		            <li class="aui-list-item aui-padded-l-5">
		                <div class="aui-list-item-inner">
		                	<div class="aui-list-item-title aui-margin-b-5">
                		        <img options="size=30x30&bgcolor=#ccc&color=#ffffff&fsize=10&text=25x25" class="placeholder aui-inline btn-radius"/>
		                		<span class="">多张图片列表一 </span>
		                	</div>
		                    	
		                	<div class="aui-padded-l-15">
		                		<p class="aui-margin-b-5">评论文字评论文字评论文字评论文字评论文字评论文字评论文字评论文字评论文字评论文字评论文字评论文字评论文字评论文字评论文字</p>
		                		<div class="aui-row aui-row-padded aui-margin-b-5">
		                		    <div class="aui-col-xs-4">
		                		        <img options="bgcolor=#ccc&color=#ffffff&fsize=10&text=45x45" class="placeholder"/>
		                		    </div>
		                		    <div class="aui-col-xs-4">
		                		        <img options="bgcolor=#ccc&color=#ffffff&fsize=10&text=45x45" class="placeholder"/>
		                		    </div>
		                		    <div class="aui-col-xs-4">
		                		        <img options="bgcolor=#ccc&color=#ffffff&fsize=10&text=45x45" class="placeholder"/>  
		                		    </div>
		                		</div>
		                		<p class="aui-margin-b-5">2018-12-12 12:12:12</p>
		                	</div>
		                </div>
		            </li>
		            
		            <li class="aui-list-item aui-padded-l-5">
		                <div class="aui-list-item-inner">
		                	<div class="aui-list-item-title aui-margin-b-5">
                		        <img options="size=30x30&bgcolor=#ccc&color=#ffffff&fsize=10&text=25x25" class="placeholder aui-inline btn-radius"/>
		                		<span class="">多张图片列表一 </span>
		                	</div>
		                    	
		                	<div class="aui-padded-l-15">
		                		<p class="aui-margin-b-5">评论文字评论文字评论文字评论文字评论文字评论文字评论文字评论文字评论文字评论文字评论文字评论文字评论文字评论文字评论文字</p>
		                		<div class="aui-row aui-row-padded aui-margin-b-5">
		                		    <div class="aui-col-xs-4">
		                		        <img options="bgcolor=#ccc&color=#ffffff&fsize=10&text=45x45" class="placeholder"/>
		                		    </div>
		                		    <div class="aui-col-xs-4">
		                		        <img options="bgcolor=#ccc&color=#ffffff&fsize=10&text=45x45" class="placeholder"/>
		                		    </div>
		                		    <div class="aui-col-xs-4">
		                		        <img options="bgcolor=#ccc&color=#ffffff&fsize=10&text=45x45" class="placeholder"/>  
		                		    </div>
		                		</div>
		                		<p class="aui-margin-b-5">2018-12-12 12:12:12</p>
		                	</div>
		                </div>
		            </li>
		        </ul>
		    </div>
		</div>
		<!--end:内容区域-->
		
		<!--start:footer-->
		<footer class="aui-bar aui-bar-tab bg-white shopFooter" id="footer">
			<div class="aui-col-xs-6">
				 <a href="" class="shopFooter-items aui-col-xs-4">
			        <i class="shopIcon aui-iconfont aui-icon-comment"></i>
			        <div class="aui-bar-tab-label">客服</div>
			    </a>
			    <a href="shop.html" class="shopFooter-items aui-col-xs-4">
			        <i class="shopIcon aui-iconfont aui-icon-home"></i>
			        <div class="aui-bar-tab-label">店铺</div>
			    </a>
			    <a href class="shopFooter-items active aui-col-xs-4">
			        <i class="shopIcon aui-iconfont aui-icon-like"></i>
			        <div class="aui-bar-tab-label">收藏</div>
			    </a>
			</div>
			
			<div class="aui-col-xs-6">
			    <div class="aui-col-xs-7">
			        <a class="aui-btn aui-btn-block noradius md-font bg-pink text-white">加入购物车</a>
			    </div>
			     <div class="aui-col-xs-5">
			        <a class="aui-btn aui-btn-danger aui-btn-block noradius md-font">立即购买</a>
			    </div>
			</div>
		</footer>
		<!--end:footer-->
		
	</body>
	<script type="text/javascript" src="js/api.js"></script>
	<script type="text/javascript" src="js/aui-slide.js"></script>
	<script type="text/javascript" src="js/aui-tab.js"></script>
	<script type="text/javascript" src="js/aui-pull-refresh.js"></script>
	<script type="text/javascript" src="js/aui-scroll.js"></script>
	<script src="js/placeholder.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="js/zepto.js" charset="utf-8"></script>
	<script type="text/javascript">
		//头部脚部占位div
 		$('#bty_header').after('<div style="height:'+ $('#bty_header').height()  +'px"></div>');
 		$('#footer').after('<div style="height:'+ $('#footer').height()  +'px;background:#fff;"></div>');
		
		//tab切换
		var tab = new auiTab({
			element: document.getElementById("tab"),
			index: 1,
			repeatClick: false
		}, function(ret) {
			var thisBtn = document.getElementsByClassName('aui-tab-item aui-active')[0];
			thisBtn.style.color = "#FFF !important"
			thisBtn.style.backgroundColor = "transparent  !important"
		});
		
		//轮播图组件
		var slide = new auiSlide({
			container: document.getElementById("aui-slide"),
			"height":400,
			"speed": 500,
			"autoPlay": 3000,
			"loop": true,
			"pageShow": true,
			"pageStyle": 'dot',
			'dotPosition': 'center',
		})

	  function shareout(wechatPark,wechat){
	  	var shareBox = '<div class="shareBox bg-white"><div class="shareBox-title text-center aui-padded-10 aui-border-t"> 分享 </div><div class="shareBox-contant aui-border-t clearfix"><a href="' + wechatPark + ' " class="aui-col-xs-6 text-center aui-padded-15"><i class="aui-iconfont aui-icon-wechat-circle"></i><p>朋友圈</p></a><a href="'+ wechat +'" class="aui-col-xs-6 text-center aui-padded-15"><i class="aui-iconfont aui-icon-wechat"></i><p>微信</p></a></div></div>'
		var bodyNode = document.getElementsByTagName('body');
		bodyNode.appendChild();
	  }

	</script>
</html>